<script setup lang="ts">
import LessonIndexList from '@/components/LessonIndexList.vue'
import { OrderApi, getWxOpenId } from '@/apis'

const props = defineProps<{
  data: OrderApi.OrderResp
}>()

const emits = defineEmits(['change'])
const loading = ref(false)
const cancelOrder = async () => {
  try {
    loading.value = true
    await OrderApi.cancelOrder(props.data.id)
    emits('change')
  } finally {
    loading.value = false
  }
}

const onlinePay = () => {
  loading.value = true
  const req = {
    openid: '',
    orderId: props.data.id,
  }
  uni.login({
    provider: 'weixin',
    success: async (res) => {
      if (!res.code) {
        uni.showToast({
          icon: 'error',
          title: '获取微信code失败!',
        })
        loading.value = false
        return
      }
      const sessionRes = await getWxOpenId(res.code)
      req.openid = sessionRes.openid
      OrderApi.onlinePay(req).then((orderInfo) => {
        uni.requestPayment({
          provider: 'wxpay',
          ...orderInfo,
          success: () => {
            emits('change')
            uni.navigateTo({ url: '/pages/result/success' })
            // toast.success('支付成功!')
          },
          fail: (fail) => {
            console.warn('支付失败: ', fail)
            uni.showToast({
              icon: 'error',
              title: '支付失败!',
            })
          },
        })
      }).finally(() => {
        loading.value = false
      })
    },
    fail: (fail) => {
      console.log('uni.login调用失败: {}', fail)
      loading.value = false
    },
  })
}
</script>

<template>
  <view class="card">
    <view class="fw-500 text-main">
      订单编号: {{ data.id }}
    </view>
    <view v-for="(item, index) in data.orderItems" :key="index">
      <view class="wrapper mt-15rpx">
        <!-- <view class="text-15px text-gray">
          班级
        </view> -->
        <view class="mt-8px text-15px font-500 text-main">
          <text>{{ item.className || '-' }}</text>
        </view>
        <view class="mt-2">
          <LessonIndexList :list="item.lessonIndexes" />
        </view>
      </view>
    </view>

    <view class="mt-1 flex-row-start-center text-15px">
      <text class="text-gray">
        下单时间：
      </text>
      <text>
        {{ data.createTime || '-' }}
      </text>
    </view>
    <!-- <view class="mt-1 flex-row-start-center text-15px">
      <text class="text-gray">
        支付状态：
      </text>
      <text :class="{ 'color-[#63b486]': data.payOff, 'color-[#bb3d2d]': !data.payOff }">
        {{ data.payOff ? '已支付' : "待支付" }}
      </text>
    </view> -->
    <view v-if="data.cancel" class="mt-1 flex-row-start-center text-15px">
      <text class="text-gray">
        取消时间：
      </text>
      <text>
        {{ data.cancelTime || '-' }}
      </text>
    </view>
    <view v-if="data.payOff" class="mt-1 flex-row-start-center text-15px">
      <text class="text-gray">
        支付时间：
      </text>
      <text>
        {{ data.payTime || '-' }}
      </text>
    </view>
    <view class="mt-1 flex-row-between-center">
      <view class="mt-1 flex-row-start-center text-15px">
        <text class="text-gray">
          订单金额：
        </text>
        <text class="font-size-[36rpx] color-[#cb2e21] font-600">
          ￥{{ data.actualTotalPrice || '-' }}
        </text>
      </view>
      <view v-if="data.status === 'CANCELED'" class="text-gray">
        已取消
      </view>
      <view v-else-if="data.payOff" class="text-green-6">
        已完成
      </view>
      <view v-else class="flex-row-start-center">
        <view class="mr">
          <wd-button type="warning" size="small" plain :loading="loading" @click="cancelOrder">
            取消
          </wd-button>
        </view>

        <wd-button type="success" size="small" :loading="loading" @click="onlinePay">
          去支付
        </wd-button>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .wrapper {
    background: #F7F8FA;
    border-radius: 16rpx;
    padding: 24rpx;
  }
</style>
